<!-- 学生分布 -->
<template>
  <div>
    <v-echarts :options="options" autoresize :class="$style.echartStyle"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/legendScroll'
  export default {
    components: { 'v-echarts': ECharts },
    data () {
      return {}
    },

    computed: {
      options () {
        let color = ['#246AF1', '#DDEC00', '#F36086', '#9232FF', '#00FFFF', '#53FCC0']
        return {
          color: color,
          // title: {
          //   text: '南丁格尔玫瑰图',
          //   subtext: '纯属虚构',
          //   left: 'center'
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['建筑工', '水泥工', '浇筑工', '钢结构工', '边坡检测工'],
            padding: [
              35,  // 上
              10, // 右
              5,  // 下
              50, // 左
            ],
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '半径模式',
              type: 'pie',
              radius: [20, 100],
              center: ['70%', '50%'],
              roseType: 'radius',
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              },
              data: [
                {value: 10, name: '建筑工'},
                {value: 5, name: '水泥工'},
                {value: 15, name: '浇筑工'},
                {value: 25, name: '钢结构工'},
                {value: 20, name: '边坡检测工'}
              ]
            }
          ]
        }
      }
    },

    methods: {},
    created () {},
    beforeDestroy () {
      clearInterval(this.timer0)
    }
  }

</script>
<style lang='scss' module>
  .echartStyle{
    width: 100%;
    height: 200px;
    margin: 0 auto;
  }
</style>
